<template>
    <div>
<p v-color="{color,text:'hello'}">标题</p>
<p v-fontSize="fontSize">改变大小</p>
<button @click="change">字体大小</button>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const color =ref('red')
const fontSize = ref('20px')
const vFontSize ={
    mounted(el, binding,) {
        el.style.fontSize=binding.value
    },
    updated(el, binding) {
        el.style.fontSize=binding.value
        
    },
}
const vColor= {
    mounted: (el, binding, vnode, prevVnode) => {
        // console.log('el:'+el);
        // console.log('binding:'+binding.value.fontSize);
        // console.log('vnode:'+vnode);
        // console.log('prevVnode:'+prevVnode);
        el.style.color=binding.value.color
        el.innerText=binding.value.text
        // el.style.fontSize= binding.value.fontSize

    }
}
function change(params) {
    fontSize.value='50px'
}
</script>

<style  scoped>

</style>